<template>

    <el-main style="height: 930px;">

      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd" >新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-input style="width: 200px" placeholder="请输入商品分类" suffix-icon="el-icon-search"  v-model="variety"></el-input>
        <el-input style="width: 200px" placeholder="请输入商品名称" suffix-icon="el-icon-position" class="ml-5" v-model="name"></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>


      <div>
            <el-table
                :data="tableData"
                :cell-style="{textAlign:'center'}"
                :header-cell-style="{textAlign:'center'}"
                style="width: 100%;"
                empty-text="无"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
              <el-table-column type="selection" width="50" ></el-table-column>
              <el-table-column prop="id" label="商品代码" width="80" ></el-table-column>
              <el-table-column prop="name" label="商品名称" width="100" ></el-table-column>
              <el-table-column prop="variety" label="商品分类" width="90" ></el-table-column>
              <el-table-column prop="unit" label="计量单位" width="90"></el-table-column>
              <el-table-column prop="salePrice" label="原价" width="90"></el-table-column>
              <el-table-column prop="discount" label="商品折扣" width="90"></el-table-column>
              <el-table-column prop="costPrice" label="成本价" width="90"></el-table-column>
              <el-table-column prop="type" label="型号" width="90"></el-table-column>
              <el-table-column prop="provider" label="供应商" width="100"></el-table-column>
              <el-table-column prop="manufacture" label="厂商" width="100"></el-table-column>
              <el-table-column prop="dateFrom" label="保质期限开始" width="100"></el-table-column>
              <el-table-column prop="dateTo" label="保质期限结束" width="100"></el-table-column>
              <el-table-column prop="withdraw" label="可否退货" width="90"></el-table-column>
              <el-table-column prop="change" label="可否换货" width="90"></el-table-column>
              <el-table-column prop="notes" label="备注" width="90" ></el-table-column>
              <el-table-column label="操作"  width="200" align="center">
                <template slot-scope="scope">
                  <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                  <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定删除吗？"
                    @confirm="del(scope.row.name)"
                  >
                    <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
                  </el-popconfirm>
                </template>
                </el-table-column>
              </el-table>
          </div>



      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <el-dialog title="新增商品" :visible.sync="dialogFormVisible" width="30%" >
        <el-form label-width="80px" size="small">
          <el-form-item label="商品名称">
            <el-input v-model="form.name" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-input v-model="form.variety" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="计量单位">
            <el-input v-model="form.unit" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="原价">
            <el-input v-model="form.salePrice" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="商品折扣">
            <el-input v-model="form.discount" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="成本价">
            <el-input v-model="form.costPrice" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="form.type" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="form.provider" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="厂商">
            <el-input v-model="form.manufacture" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="保质期限开始" >
            <el-date-picker
              v-model="form.dateFrom"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 300px"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="保质期限结束" >
            <el-date-picker
              v-model="form.dateTo"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 300px"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="可否退货">
            <el-input v-model="form.withdraw" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="可否换货">
            <el-input v-model="form.change" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.notes" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑商品" :visible.sync="dialogFormVisible1" width="30%" >
        <el-form label-width="80px" size="small">
          <el-form-item label="商品名称">
            <el-input v-model="form.name" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-input v-model="form.variety" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="计量单位">
            <el-input v-model="form.unit" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="原价">
            <el-input v-model="form.salePrice" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="商品折扣">
            <el-input v-model="form.discount" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="成本价">
            <el-input v-model="form.costPrice" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="form.type" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="form.provider" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="厂商">
            <el-input v-model="form.manufacture" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="保质期限开始" >
            <el-date-picker
              v-model="form.dateFrom"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 300px"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="保质期限结束" >
            <el-date-picker
              v-model="form.dateTo"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 300px"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="可否退货">
            <el-input v-model="form.withdraw" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="可否换货">
            <el-input v-model="form.change" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.notes" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="save1">确 定</el-button>
        </div>
      </el-dialog>

    </el-main>


</template>

<script>

import axios from "axios";

export default {
    name: 'BusinessDevelopment',
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        variety:"",
        name: "",
        form: {},
        loading:false,
        dialogFormVisible: false,
        dialogFormVisible1:false,
        multipleSelection: [],
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        axios.post("http://127.0.0.1:8080/test/cargo/getCarDesPage", {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            variety: this.variety,
            name: this.name,
          }).then(res => {
          this.tableData = res.data.data.list
          this.total = res.data.total
        })
      },

      reset() {
        this.variety = ""
        this.name = ""
        this.load()
      },

      del(name) {
        axios.get("http://127.0.0.1:8080/test/cargo/cargoDesDelete/"+name).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error("删除失败")
          }
        })
      },

      save() {
        axios.post("http://127.0.0.1:8080/test/cargo/carDesRegister",
          {
        "name":this.form.name,
        "variety":this.form.variety,
        "unit":this.form.unit,
        "salePrice":this.form.salePrice,
        "discount":this.form.discount,
        "costPrice":this.form.costPrice,
        "type":this.form.type,
        "provider":this.form.provider,
        "manufacture":this.form.manufacture,
        "dateFrom":this.form.dateFrom,
        "dateTo":this.form.dateTo,
        "withdraw":this.form.withdraw,
        "change":this.form.change,
        "notes":this.form.notes
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success("新增成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("新增失败")
          }
        })
      },

      save1() {
        axios.post("http://127.0.0.1:8080/test/cargo/updateCargoDes",
          {
            "id":this.form.id,
            "name":this.form.name,
            "variety":this.form.variety,
            "unit":this.form.unit,
            "salePrice":this.form.salePrice,
            "discount":this.form.discount,
            "costPrice":this.form.costPrice,
            "type":this.form.type,
            "provider":this.form.provider,
            "manufacture":this.form.manufacture,
            "dateFrom":this.form.dateFrom,
            "dateTo":this.form.dateTo,
            "withdraw":this.form.withdraw,
            "change":this.form.change,
            "notes":this.form.notes
          }).then(res => {
          if (res.data.code === 200) {
            this.$message.success("保存成功")
            this.dialogFormVisible1 = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })
      },

      handleAdd() {
        this.dialogFormVisible = true
        this.form = {}
      },
      handleEdit(row) {
        this.form= JSON.parse(JSON.stringify(row));
        this.dialogFormVisible1 = true
      },

      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },

      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
    }
  }

</script>

<style>

  .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #00aaff;
    }

  .el-table .quehuo {
    background: #FF0000;
  }

  .btn1 {
    position: relative;
    right: 0.625rem;
  }

</style>
